@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-searchPrivate';
@import "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element";

$sizes: 's', 'm', 'l';

.container {
  display: flex;
  flex-grow: 1;
  align-items: center;
  box-sizing: border-box; 

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      @include composite-var($search-private, $size);

      input {
        @include composite-var($theme-variables, 'sans', 'body', $size);

        cursor: text;
      }

      svg {
        width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
        height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
      }
    }
  }
}

.postfix {
  display: inline-flex;
  flex-shrink: 0;
  gap: $space-fields-postfix-gap;
}

.prefix {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  color: $sys-neutral-text-light;
}